<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+
            request.getServerPort()+request.getContextPath()+"/";
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="icon" type="image/x-icon" href="img/title-icon.jpg"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="css/login.css" />
    <style>
        .waring{
            color: red;
            visibility:hidden;
            /*visibility:visible(显示)或hidden(隐藏)*/
        }
    </style>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<body>

<!--登录/注册的中部-->
<div class="lr-main">
    <div class="w1230">
        <div class="reg-div">
            <h3 class="login-title">登录User后台管理系统</h3>

            <form action="user.do?method=loginIn" method="post" onsubmit="return check()">
                <span class="waring" id="usna">用户名不能为空！</span>
                <p><span class="icon-account"></span>
                    <input type="text" id="usN" name="userName" onblur="check()" placeholder="请输入已注册的账号"/></p>

                <span class="waring" id="pasw">密码不能为空！</span>
                <p><span class="icon-pwd"></span>
                    <input type="password" id="paW" name="passWord" onblur="check()" placeholder="请输入密码"/></p>

                <span class="waring" id="yzmSty">验证码不能为空！</span>
                <p class="clear-float">
                    <input type="text" id="yzmText"  name="inputYzm"  onblur="check()"
                           placeholder="验证码" class="code"/>
                    <img src="user.do?method=findYzm" id="yzM"   onclick="changeYzm()"
                         width="110px" height="42px" class="code-img"/>
                </p>

                <input type="submit" value="登录" class="sum-btn" />
            </form>
        </div>
    </div>
</div>
<!--登录/注册的底部-->
<div class="lr-footer footer">
    <p class="w1230">
        <a href="#">关于我们</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 login.com 版权所有</span>
    </p>
</div>
</body>
<script>

    if($("#returnMsg").val()!=""){
        $("#returnMsg").css("visibility","visible")
    }else {
        $("#returnMsg").css("visibility","hidden")
    }

    function checkUserName() {
        if($("#usN").val().trim()==""){
            $("#usna").css("visibility","visible")
            return true
        }else {
            $("#usna").css("visibility","hidden")
            return false
        }
    }
    function checkPassword() {
        if($("#paW").val().trim()==""){
            $("#pasw").css("visibility","visible")
            return true
        }else{
            $("#pasw").css("visibility","hidden")
            return false
        }
    }
    function checkYzm() {
        if($("#yzmText").val().trim()==""){
            $("#yzmSty").css("visibility","visible")
            return true
        }else{
            $("#yzmSty").css("visibility","hidden")
            return false
        }
    }
    function check() {
        a=checkUserName()
        b=checkPassword()
        c=checkYzm()
        if(a==false&&b==false&&c==false){
            return true
        } else{
            return false
        }
    }
    function changeYzm() {
        $.ajax({
            url:"user.do",
            data:{
                "method":"findYzm"
            },
            success:function (e) {
                /*alert("s")*/
                $("#yzM").attr("src","user.do?method=findYzm&flag="+Math.random())
            }
        })
    }
</script>
</html>

